<!--
 *@description:
 *@author: Ming
 *@date: 2021-05-29 22:38:46
 *@version: V1.0.5
-->
<template>
  <div class="tabs-head" ref="tabsHead">
    <slot></slot>
    <div class="line" ref="line"></div>
    <div class="actions-wrapper">
      <slot name="actions"></slot>
    </div>
    
  </div>
</template>

<script>
export default {
  name:'LmtabsHead',
  inject:['eventBus'],
  created() {
    this.eventBus.$on('update:selected',(item,vm)=>{
      let {width, height, top, left} = vm.$el.getBoundingClientRect()
      let mainLeft = this.$refs.tabsHead.getBoundingClientRect().left
      this.$refs.line.style.width = `${width}px`
      this.$refs.line.style.transform = `translateX(${left-mainLeft}px)`
    })
  }
};
</script>

<style lang="scss" scoped>
$height: 40px;
.tabs-head{
  display: flex;
  height: $height;
  justify-content: flex-start;
  align-items: center;
  position: relative;  
  > .actions-wrapper{
    height:$height;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
  }
  > .line{
    transition: all .3s;
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #409eff;
    z-index: 1;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    list-style: none;
  }
  &::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #e4e7ed;
    height: 2px;
  }
}
</style>
